<!--
 * @Autor: Ruohong Yu
 * @Date: 2023-03-31 10:59:27
 * @Description: file content
 * @FilePath: \ebook\src\components\login\Login.vue
-->
<template>
  <div class="login">
    <div class="bg-setting"></div>
    <div class="login-wrapper">
      <!-- 左侧的注册盒子 -->
      <div class="login-left">
        <div class="title">Ybook Reader</div>
        <div class="userbox">
          <div class="usericon icon"></div>
          <input  class="user" id="user"  v-model="username" placeholder="用户名">
        </div>
        <div class="pwdbox">
          <div class="pswicon icon"></div>
          <input  class="pwd"  id="password" v-model="password" type="password"  placeholder="密码">
        </div>
        <div class="tip" v-if="loginError">{{tipText}}</div>
        <div class="log-box">
          <button type="primary" class="login_btn" @click="gotoHome">游客登录</button>
          <button type="primary" class="login_btn" @click="needLogin">登录</button>
        </div>
        <div class="register_btn forget" @click="gotoForpassword">忘记密码</div>
        <div class="register_btn" @click="gotoRegister">没有账号？去注册</div>
      </div>
      <!-- 右侧的注册盒子 -->
      <div class="login-right">
        <div class="title">Welcome To Ybook Reader</div>
      </div>
    </div>
  </div>
</template>

<script>
import { saveUsername, saveToken, saveUserEmail, saveAvatar } from '@/utils/localStorage'
import { login } from '../../api/user'
import crypto from '@/utils/crypto'
export default {
  data () {
    return {
      username: '',
      password: '',
      tipText: '',
      loginError: false
    }
  },
  methods: {
    gotoRegister () {
      this.$router.push({
        path: '/register'
      })
    },
    gotoHome () {
      this.$router.push({
        path: '/store/home'
      })
    },
    gotoForpassword () {
      this.$router.push({
        path: '/forpassword'
      })
    },
    needLogin () {
      const pwd = crypto.Encrypt(this.password)
      login(this.username, pwd).then(res => {
        if (res.data.status === 1) {
          this.tipText = '*用户名或密码错误'
          this.loginError = true
        } else if (res.data.status === 2) {
          this.tipText = '*用户名或密码错误'
          this.loginError = true
        } else if (res.data.status === 0) {
          this.loginError = false
          saveUsername(res.data.username)
          saveUserEmail(res.data.useremail)
          saveToken(res.data.token)
          saveAvatar(res.data.avatar)
          this.$router.push({
            path: '/store/home'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (min-width: 768px){
  .login{
    background-image:url('../../assets/images/loginbg.png');
    width: 100%;
    height: 100%;
    .bg-setting{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #0b5137d8;
    }
    .login-wrapper{
      display:flex;
      position:absolute;
      width:px2rem(700);
      height:px2rem(400);
      border-radius: 12px;
      overflow: hidden;
      top:40%;
      left:50%;
      transform: translate(-50%,-50%);
      box-shadow: 0 12px 16px 0  rgba(0,0,0,0.24), 0 17px 50px 0 #4E655D;
      .login-left{
        position: relative;
        background-color:#fff;
        width:px2rem(220);
        .title{
          position: absolute;
          top: px2rem(40);
          left: px2rem(30);
          width: 100%;
          font-size: px2rem(20);
          background-image: -webkit-linear-gradient(right bottom, #3D867F, #67B9C1, #FD4804);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        input{
          outline-style: none ;
          border: 0;
          border-bottom:1px solid #E9E9E9;
          border-radius: px2rem(5);
          background-color:#F8F8F8;
          padding-left: px2rem(2);
          height:px2rem(20);
          width: 100%;
          font-family:sans-serif;
          font-size:px2rem(10);
          color:#89AB9E;
        }
        input::-webkit-input-placeholder{
            color:#0b5137;
        }
        input:focus{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:hover{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:-webkit-autofill {
          /* 修改默认背景框的颜色 */
          box-shadow: 0 0 0px px2rem(1000)  #89AB9E inset !important;
          /* 修改默认字体的颜色 */
          -webkit-text-fill-color: #445b53;
        }
        input:-webkit-autofill::first-line {
          /* 修改默认字体的大小 */
          font-size: px2rem(10);
          /* 修改默认字体的样式 */
          font-weight:bold;
        }
        .icon{
          display:inline-block;
          width:px2rem(15);
          height:px2rem(15);
          margin-right: px2rem(5);
          margin-left: px2rem(5);
          margin-top: px2rem(5);
        }
        .usericon{
          background:url('../../assets/images/username.png') no-repeat center;
          background-size:contain;
        }
        .pswicon{
          background:url('../../assets/images/password.png') no-repeat center;
          background-size:contain;
        }
        .userbox{
          margin-top:px2rem(120);
          height:px2rem(30);
          width:100%;
          display: flex;
        }
        .pwdbox{
          height:px2rem(30);
          width:100%;
          display: flex;
          margin-top: px2rem(15);
        }
        .tip{
          position: absolute;
          right: px2rem(10);
          font-size: px2rem(10);
          color: rgb(172, 0, 0);
        }
        .register_btn{
          position: absolute;
          bottom: px2rem(20);
          background-color: transparent;
          border: none;
          text-decoration: none;
          font-size: px2rem(12);
          color:#4E655D;
          font-size:px2rem(12);
          text-decoration:underline;
          display: flex;
          margin-left:px2rem(20);
          outline:none;
          &:hover{
            font-weight:bold;
            cursor: pointer;
          }
        }
        .forget{
          right: px2rem(20);
        }
        .log-box{
          font-size:px2rem(12);
          display: flex;
          justify-content: space-between ;
          width:100%;
          margin-top: px2rem(20);
          color:#4E655D;
          align-items: center;
          @include center;
          .login_btn{
            background-color: #5f8276;
            border: none;
            color: #FAFAFA;
            padding: px2rem(5) px2rem(22);
            margin: px2rem(5);
            text-align: center;
            text-decoration: none;
            font-size: px2rem(13);
            border-radius: px2rem(12);
            outline:none;
          }
          .login_btn:hover{
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            cursor: pointer;
            background-color: #0b5137;
            transition: all 0.2s ease-in;
          }
        }
      }
      .login-right{
        width:px2rem(500);
        background-image:url('../../assets/images/loginbg.png');
        background-size:cover;
        font-family:sans-serif;
        .title{
          color: #fff;
          margin-top:px2rem(320);
          margin-left: px2rem(20);
          font-weight:bold;
          font-size:px2rem(20);
        }
        .title:hover{
          font-size:px2rem(21);
          transition: all 0.4s ease-in-out;
          cursor: pointer;
        }
      }
    }
  }
}
@media only screen and (max-width: 767px){
  .login{
    background-image:url('../../assets/images/loginbg.png');
    width: 100%;
    height: 100%;
    .bg-setting{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #0b5137d8;
    }
    .login-wrapper{
      display:flex;
      position:absolute;
      width:80%;
      height:px2rem(400);
      border-radius: 12px;
      overflow: hidden;
      top:40%;
      left:50%;
      transform: translate(-50%,-50%);
      box-shadow: 0 12px 16px 0  rgba(0,0,0,0.24), 0 17px 50px 0 #4E655D;
      .login-left{
        position: relative;
        background-color:#fff;
        width:100%;
        .title{
          position: absolute;
          top: px2rem(40);
          left: px2rem(85);
          width: 100%;
          font-size: px2rem(20);
          background-image: -webkit-linear-gradient(right bottom, #3D867F, #67B9C1, #FD4804);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        input{
          outline-style: none ;
          border: 0;
          border-bottom:1px solid #E9E9E9;
          border-radius: px2rem(5);
          background-color:#F8F8F8;
          padding-left: px2rem(2);
          height:px2rem(20);
          width: 100%;
          font-family:sans-serif;
          font-size:px2rem(10);
          color:#89AB9E;
        }
        input::-webkit-input-placeholder{
            color:#0b5137;
        }
        input:focus{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:hover{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:-webkit-autofill {
          /* 修改默认背景框的颜色 */
          box-shadow: 0 0 0px px2rem(1000)  #89AB9E inset !important;
          /* 修改默认字体的颜色 */
          -webkit-text-fill-color: #445b53;
        }
        input:-webkit-autofill::first-line {
          /* 修改默认字体的大小 */
          font-size: px2rem(10);
          /* 修改默认字体的样式 */
          font-weight:bold;
        }
        .icon{
          display:inline-block;
          width:px2rem(15);
          height:px2rem(15);
          margin-right: px2rem(5);
          margin-left: px2rem(5);
          margin-top: px2rem(5);
        }
        .usericon{
          background:url('../../assets/images/username.png') no-repeat center;
          background-size:contain;
        }
        .pswicon{
          background:url('../../assets/images/password.png') no-repeat center;
          background-size:contain;
        }
        .userbox{
          margin-top:px2rem(120);
          height:px2rem(30);
          width:100%;
          display: flex;
        }
        .pwdbox{
          height:px2rem(30);
          width:100%;
          display: flex;
          margin-top: px2rem(15);
        }
        .tip{
          position: absolute;
          right: px2rem(10);
          font-size: px2rem(10);
          color: rgb(172, 0, 0);
        }
        .register_btn{
          position: absolute;
          bottom: px2rem(20);
          background-color: transparent;
          border: none;
          text-decoration: none;
          font-size: px2rem(12);
          color:#4E655D;
          font-size:px2rem(12);
          text-decoration:underline;
          display: flex;
          margin-left:px2rem(20);
          outline:none;
          &:hover{
            font-weight:bold;
            cursor: pointer;
          }
        }
        .forget{
          right: px2rem(20);
        }
        .log-box{
          font-size:px2rem(12);
          display: flex;
          justify-content: space-between ;
          width:100%;
          margin-top: px2rem(20);
          color:#4E655D;
          align-items: center;
          @include center;
          .login_btn{
            background-color: #5f8276;
            border: none;
            color: #FAFAFA;
            padding: px2rem(5) px2rem(22);
            margin: px2rem(5);
            text-align: center;
            text-decoration: none;
            font-size: px2rem(13);
            border-radius: px2rem(12);
            outline:none;
          }
          .login_btn:hover{
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            cursor: pointer;
            background-color: #0b5137;
            transition: all 0.2s ease-in;
          }
        }
      }
      .login-right{
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        display:none;
        position:absolute;
        z-index:-1000;
        transform:scaleY(0);
      }
    }
  }
}

</style>
